<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>徽虫争鸣</title>
    <link rel="stylesheet" type="text/css" href="/static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" href="/static/css/reset.css" type="text/css"/>
    <link rel="stylesheet" href="/static/css/index.css" type="text/css"/>
    <link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/2.7.0/skins/default/aliplayer-min.css"/>
    <link href="/static/css/templet.css" type="text/css"/>
</head>

<body id="contentBody" ng-app="app" ng-controller="index">
<!--<h1>游戏大厅</h1>-->
<div class="noticeWrap">
    <img src="/static/images/icon_horn.png" alt="公告">
    <div class="noticeCont">
        <marquee>安徽秋鸣网文化传媒有限公司 暂无系统公告 排行榜信息</marquee>
    </div>
</div>
<div class="videoinfo clearfix">
    <div class="l_playerWrap fl">
        <h4 class="l_playerTitle">红方</h4>
        <!--<p class="curGameStatus" ng-if="info.status==0">等待开始</p>-->
        <!--<p class="curGameStatus" ng-if="info.status==10">开盆</p>-->
        <!--<p class="curGameStatus" ng-if="info.status==7">七扣</p>-->
        <!--<p class="curGameStatus" ng-if="info.status==6">六扣</p>-->
        <!--<p class="curGameStatus" ng-if="info.status==5">五扣</p>-->
        <!--<p class="curGameStatus" ng-if="info.status==-1">已关闭</p>-->
        <!--<span>{{no}}-&#45;&#45;{{user.id}}</span>-->
        <ul class="l_chipList">
            <li class="chipItem" ng-class="{true:'active',false:''}[info.status== 10]">
                <strong class="chiplabel">开盆: </strong>
                <strong class="chipText" ng-cloak>{{info.info.red_kaipen}}</strong>
            </li>
            <li class="chipItem" ng-class="{true:'active',false:''}[info.status== 7]">
                <strong class="chiplabel">七扣:</strong>
                <strong class="chipText" ng-cloak>{{info.info.red_qikou}}个</strong>
            </li>
            <li class="chipItem" ng-class="{true:'active',false:''}[info.status== 6]">
                <strong class="chiplabel">六扣:</strong>
                <strong class="chipText" ng-cloak>{{info.info.red_liukou}}个</strong>
            </li>
            <li class="chipItem" ng-class="{true:'active',false:''}[info.status== 5]">
                <strong class="chiplabel">五扣:</strong>
                <strong class="chipText" ng-cloak>{{info.info.red_wukou}}个</strong>
            </li>
            <li class="chipItem" ng-class="{true:'active',false:''}[info.status== 4]">
                <strong class="chiplabel">四扣:</strong>
                <strong class="chipText" ng-cloak>{{info.info.red_sikou}}个</strong>
            </li>
        </ul>

        <h4 class="l_playerTitle">竞拍：
            <span ng-if="info.info.red_kaipen > info.info.blue_kaipen">放扣</span>
            <span ng-if="info.info.red_kaipen < info.info.blue_kaipen">接扣</span>
            <!--<span ng-if="kou == 2">接扣</span> <span ng-if="kou == 1">放扣</span> -->
        </h4>
        <!--<h4 class="l_playerTitle" >竞拍：</h4>-->


        <p ng-cloak>{{redstatus}}</p>
        <ul class="rewardsList">
            <li class="rewardsItem" ng-if="status<=0 || status == 10" ng-click="giveReward(reward,1,'confirm')"
                ng-repeat="reward in rewards">
                <img src="/static/images/f1.png">
                <p ng-cloak>{{reward}}</p>
            </li>

            <li class="rewardsItem" ng-if="status>0 && status<10" ng-click="giveReward(reward.value,1,'confirm')"
                ng-repeat="reward in kou_rewards">
                <img src="/static/images/f1.png">
                <p ng-cloak>{{reward.name}}</p>
            </li>
        </ul>
    </div>

    <div class="topvideo">
        <div class="prism-player" id="topvideo"></div>
        <div ng-show="isBarrageInput" class="barrageTextWrap">
            <p class="barrageMsgItem ani-toLeft" ng-style="{'top':msgItem.oTop+'px'}" ng-repeat="(key,msgItem) in barrageMsgArr track by key">{{msgItem.textMsg}}</p>
        </div>
        <!-- 弹幕开关 -->
        <div class="barrageWrap clearfix" style="display: none">
            <div ng-click="tabBarrageStatus()" title="弹幕" class="barrageSwitchWrap fl" ng-class="{true:'toRight',false:'toLeft'}[isBarrageInput]">
                <button>{{isBarrageInput ? "开" : "关"}}</button>
            </div>
            <div ng-if="isBarrageInput" class="barrageInputWrap fl">
                <input  class="barrageInput" type="text" maxlength="30"  ng-model="barrageText" placeholder="请输入想说的话参与互动">
                <button class="sendTextBtn" ng-click="sendBarrageMsg(barrageText)">发送</button>
            </div>
        </div>
        <div class="curAchivt">
            <ul class="clearfix">
                <li ng-repeat="winner in info.winners track by $index "
                    ng-class="{'bg_red':winner==1,'bg_blue':winner==2,'bg_gray':winner==0}">
                    <span>{{ $index+1 }}</span>
                </li>
            </ul>
        </div>
    </div>

    <div class="r_playerWrap fr">
        <h4 class="r_playerTitle">蓝方</h4>

        <ul class="r_chipList">
            <li class="chipItem" ng-class="{true:'active',false:''}[info.status== 10]">
                <strong class="chiplabel">开盆:</strong>
                <strong class="chipText" ng-cloak>{{info.info.blue_kaipen}}</strong>
            </li>
            <li class="chipItem" ng-class="{true:'active',false:''}[info.status== 7]">
                <strong class="chiplabel">七扣: </strong>
                <strong class="chipText" ng-cloak>{{info.info.blue_qikou}}个</strong>
            </li>
            <li class="chipItem" ng-class="{true:'active',false:''}[info.status== 6]">
                <strong class="chiplabel">六扣: </strong>
                <strong class="chipText" ng-cloak>{{info.info.blue_liukou}}个</strong>
            </li>
            <li class="chipItem" ng-class="{true:'active',false:''}[info.status== 5]">
                <strong class="chiplabel">五扣:</strong>
                <strong class="chipText" ng-cloak>{{info.info.blue_wukou}}个</strong>
            </li>
            <li class="chipItem" ng-class="{true:'active',false:''}[info.status== 4]">
                <strong class="chiplabel">四扣:</strong>
                <strong class="chipText" ng-cloak>{{info.info.blue_sikou}}个</strong>
            </li>
        </ul>

        <h4 class="r_playerTitle">竞拍：
            <span ng-if="info.info.red_kaipen < info.info.blue_kaipen">放扣</span>
            <span ng-if="info.info.red_kaipen > info.info.blue_kaipen">接扣</span>
            <!--<span ng-if="kou == 1">接扣</span> <span ng-if="kou == 2">放扣</span>-->
        </h4>
        <!--<h4 class="r_playerTitle" ng-if="kou == 2">竞拍：放扣</h4>-->

        <p ng-cloak>{{bluestatus}}</p>
        <ul class="rewardsList">
            <li class="rewardsItem" ng-if="info.status<=0 || info.status == 10"
                ng-click="giveReward(reward,2,'confirm')"
                ng-repeat="reward in rewards">
                <img src="/static/images/f2.png">
                <p ng-cloak>{{reward}}</p>
            </li>

            <li class="rewardsItem" ng-if="info.status>0 && info.status<10"
                ng-click="giveReward(reward.value,2,'confirm')"
                ng-repeat="reward in kou_rewards">
                <img src="/static/images/f2.png">
                <p ng-cloak>{{reward.name}}</p>
            </li>
        </ul>
    </div>

    <div style="clear: both"></div>
</div>

<!-- 下面区域 -->
<div class="dataBox clearfix">

    <div class="curRecordWrap fl">
        <p class="curScore" ng-cloak>
            <span>{{user.name}} 账号:&nbsp;{{user.username}}</span>
            <span>鲜花:{{ user.score }}朵</span>
        </p>
        <h3 class="curRecordTitle"><span class="swing">客服信息</span></h3>
        <div class="codeWrap">
            <img src="/static/images/contact_service.png" alt="二维码">
            <p class="codeLabel">联系客服</p>
        </div>
    </div>


    <div class="chatWrap fl">
        <!--聊天窗口-->
        <h3 class="chatTitle">互动聊天</h3>
        <div class="chatView">
            <ul class="chatList">
                <li ng-repeat="chatcontent in chats track by $index" ng-cloak>{{chatcontent}}</li>
            </ul>
        </div>
        <div class="inputWrap clearfix">
            <input class="fl" type="text" ng-model="send_chat_content" placeholder="编辑想说的话，参与互动聊天"/>
            <button class="fr" ng-click="sendmsg()">发送</button>
        </div>
    </div>


    <div class="videoWrap fl">
        <div class="prism-player" id="bottomvideo"></div>
    </div>

    <div class="hisWrap fl">
        <h4 class="hisTitle">投注记录</h4>
        <table class="table">
            <tr>
                <td>开盆</td>
                <td>{{userhis.kaipen}}</td>
            </tr>
            <tr>
                <td>七扣</td>
                <td>{{userhis.qikou}}</td>
            </tr>
            <tr>
                <td>六扣</td>
                <td>{{userhis.liukou}}</td>
            </tr>
            <tr>
                <td>五扣</td>
                <td>{{userhis.wukou}}</td>
            </tr>
            <tr>
                <td>四扣</td>
                <td>{{userhis.sikou}}</td>
            </tr>
        </table>
    </div>

    <div class="controlCenter fl">
        <div class="mainCtrlBtn">
            <h3 class="rewardTitle">打赏</h3>
            <div class="rewardCtrls" ng-init="redPlayerScore=100;bluePlayerScore=100;boardScore=100">
                <div class="ctrlItemWrap">
                    <label for="redPlayer">红草</label>
                    <div class="numCtrlTemp">
                        <p class="reduceBtn" ng-click="redPlayerScore=redPlayerScore-1"> - </p>
                        <input id="redPlayer" type="text" ng-model="redPlayerScore">
                        <p class="addBtn" ng-click="redPlayerScore=redPlayerScore+1"> + </p>
                    </div>
                    <button class="rewardRedBtn" ng-click="test()">打赏</button>
                </div>
                <div class="ctrlItemWrap">
                    <label for="bluePlayer">蓝草</label>
                    <div class="numCtrlTemp">
                        <p class="reduceBtn" ng-click="bluePlayerScore =bluePlayerScore - 1"> - </p>
                        <input id="bluePlayer" type="text" ng-model="bluePlayerScore">
                        <p class="addBtn" ng-click="bluePlayerScore =bluePlayerScore + 1"> + </p>
                    </div>
                    <button class="rewardBlueBtn" ng-click="test()">打赏</button>
                </div>
                <div class="ctrlItemWrap">
                    <label for="board">监板</label>
                    <div class="numCtrlTemp">
                        <p class="reduceBtn" ng-click="boardScore = boardScore - 1"> - </p>
                        <input id="board" type="text" ng-model="boardScore">
                        <p class="addBtn" ng-click="boardScore = boardScore + 1"> + </p>
                    </div>
                    <button class="rewardBtn" ng-click="giveReward(boardScore,0,'prompt')">打赏</button>
                </div>
            </div>
        </div>
    </div>
    <div class="btnGroup fl">
        <p class="openPropt">开放时间 <br/>每天 13:00-14:00.</p>
        <button class="rewardScoreBtn" ng-click="opengive()">赠送</button>
        <button class="reportBtn" ng-click="openreport()">历史报表</button>
        <button class="recordSummary" ng-click="openresult()">战绩汇总</button>
        <button class="modifyPwdBtn" ng-click="editpasswd()">修改密码</button>
        <button class="loginOut" ng-click="logout()">退出登录</button>

    </div>

    <div class="" style="clear: both"></div>


    <div id="modal-demo" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content radius">
                <div class="modal-header">
                    <h3 class="modal-title">打赏鲜花
                    </h3>
                    <a class="close" data-dismiss="modal" aria-hidden="true" href="javascript:void(0);">×</a>
                </div>
                <div class="modal-body">
                    <p>确定打赏
                        <span ng-switch="who">
							<span ng-switch-when="0">监板</span>
							<span ng-switch-when="1" style="color: red">红方</span>
							<span ng-switch-when="2" style="color: darkblue">蓝方</span>
						</span>
                        <span ng-if="status == 10 || who == 0">鲜花</span>
                        <input ng-if="who == 0" ng-model="score" value="{{score}}"/>
                        <span ng-if="who != 0"><strong>{{score}}</strong></span>
                        <span ng-if="status == 10 || who == 0">朵</span>
                        <span ng-if="status !=10 && who != 0">个(当前扣率折合鲜花：<strong>{{hua}}</strong>朵)</span>
                        ?</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" data-dismiss="modal" ng-click="sendreward()">确定</button>
                    <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
                </div>
            </div>
        </div>
    </div>


    {include file="index/modal-result"}

    {include file="index/modal-history"}

    {include file="index/modal-passwd"}

    {include file="index/modal-give"}

</div>

</body>
<script type="application/javascript" src="/lib/angular/angular.js"></script>
<script type="application/javascript" src="/lib/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="/static/h-ui/js/H-ui.js"></script>
<script src="https://g.alicdn.com/de/prismplayer/2.7.0/aliplayer-min.js"></script>
<script type="text/javascript" src="/lib/datatables/1.10.0/jquery.dataTables.js"></script>
<script type="text/javascript" src="/lib/jquery-starfield.min.js"></script>
<script type="text/javascript">
    var ws, myscope;
    var timer;
    
    var app = angular.module('app', []);
    console.log();
 
    app.controller("index", function ($scope, $http) {
        $scope.uid; //用户ID 被user.id替代
        $scope.no; //当前比赛ID
        $scope.kou; //当前放扣方
        $scope.topsrc = ""; //两个视频地址 写死
        $scope.bottomsrc = "";
        $scope.rewards = [100, 200, 300, 500, 1000, 2000, 3000, 5000, 10000]; //开盆时的选项
        $scope.chats = [];
        $scope.status = 0;
        $scope.kou_rewards = [ //接扣和放扣时的选项
            {
                value: 10,
                name: "10个"
            },
            {
                value: 20,
                name: "20个"
            },
            {
                value: 30,
                name: "30个"
            },
            {
                value: 50,
                name: "50个"
            },
            {
                value: 100,
                name: "100个"
            },
            {
                value: 200,
                name: "200个"
            }, {
                value: 300,
                name: "300个"
            }, {
                value: 500,
                name: "500个"
            }, {
                value: 1000,
                name: "1000个"
            }
        ]

        /*弹幕开关控制*/
        $scope.isBarrageInput = false;
        $scope.tabBarrageStatus = function () {
            $scope.isBarrageInput = !$scope.isBarrageInput;
        }

        //战绩记录
        $scope.openresult = function () {
            $("#modal-result").modal("show");
        }

        //历史投注记录
        $scope.openreport = function () {
            mytable.api().ajax.reload()
            $("#modal-history").modal("show");
        }

        //修改密码
        $scope.editpasswd = function () {
            console.log("修改密码");
            $("#modal-passwd").modal("show");
        }

        //赠送钻石
        $scope.opengive = function () {
            $("#modal-give").modal("show");
        }




        /*发送弹幕信息*/
        $scope.barrageMsgArr = [];
        $scope.barrageText = "";
        $scope.sendBarrageMsg = function (textMsg) {
            if (textMsg) {
                $scope.msgItem = {
                    textMsg: textMsg,
                    oTop: parseInt(Math.random() * ($("#topvideo").height() - 90) + 10)
                }
                $scope.barrageMsgArr.push($scope.msgItem);
            }

            /*判断字幕是否移除视口，如果是则删除该元素*/
            var textMoveTimer = setInterval(function () {
                for (var i = 0; i < $(".barrageMsgItem ").length; i++) {
                    if ($(".barrageMsgItem ").eq(i).position().left + $(".barrageMsgItem ").eq(i).width() <= 0) {
                        $scope.barrageMsgArr.splice(i,1);
                        $(".barrageMsgItem ").eq(i).remove();
                    }
                }
                if ($(".barrageMsgItem ").length <= 0 || !$scope.isBarrageInput) {
                    clearInterval(textMoveTimer);
                }
            },20)
        }

        //退出登陆
        $scope.logout = function () {
            if (window.confirm("确定退出登陆吗")) {
                window.location = "{:url('auth/logout')}";
            }
        }

        //播放视频
        $scope.readyplay = function (top, bottom) {

        }

        $scope.sendmsg = function () {
            if (!$scope.send_chat_content) {
                $.Huimodalalert("老板你总得讲点什么吧!", 1000);
                return;
            }
            chatc = {
                type: 'chat',
                data: $scope.send_chat_content,
                from: $scope.user.name
            }
            ws.send(JSON.stringify(chatc));
            $scope.send_chat_content = "";
            setTimeout(function () {
                if ($('.chatList').height() >= $('.chatView').height()) {
                    $('.chatView').scrollTop($('.chatList').height() - $('.chatView').height());
                }
            }, 300)
        }




        //打赏
        $scope.giveReward = function (score, who, type) {
            //todo 提示框 选择框 弹出都要用组件展示
            $scope.score = score;
            $scope.who = who;
            if (!$scope.status || $scope.status <= 0) {
                $.Huimodalalert('比赛都还没开始呢，再等等吧！！', 2000)
                return;
            }
            if ($scope.status > 1 && $scope.status < 10) {
                console.log("score:" + score);
                if ($scope.kou == who) {
                    $scope.hua = score * 10;
                } else {
                    $scope.hua = score * $scope.status;
                }
            }

            $("#modal-demo").modal("show");
        }

        //打赏???
        $scope.sendreward = function () {
            var msg = {
                "type": "reward",
                "uid": $scope.user.id,
                "no": $scope.no,
                "score": $scope.score,
                "who": $scope.who,
                "status": $scope.status
            };
            ws.send(JSON.stringify(msg));
        }

        //聊天
        $scope.chat = function (str) {
            var msg = {
                "type": "chat",
                "uid": $scope.user.id,
                "content": str
            }
            ws.send(JSON.stringify(msg));
        }

        //客户端连接上WS后 提交绑定UID
        $scope.binduid = function (clientid) {

            $http.get('{:url("auth/bind","",false)}/clientid/' + clientid).then(function () {
                console.log("bind clientid:" + clientid);
                ws.send(JSON.stringify({
                    type: "report",
                    id: null
                }));

                timer = setInterval(function () {
                    ws.send(JSON.stringify({
                        type: "report",
                        id: null
                    }));
                }, 300);
            });
        }
    });

    function connectWs() {
        ws = new WebSocket("ws://www.dunqu.com.cn:8282");
        ws.onopen = function (event) {
            console.log("server conected...");
            myscope = angular.element(document.querySelector("[ng-controller='index']")).scope();
            //播放视频
            setTimeout(function () {
                topsrc = "http://pili-live-hls.stormrage.cn/stormrage/test199.m3u8";
                bottomsrc = "http://pili-live-hls.stormrage.cn/stormrage/test199t.m3u8";
                myscope.readyplay(topsrc, bottomsrc);
            }, 2000);
        }

        ws.onmessage = function (p1) {
            var data = JSON.parse(p1.data);
            console.log(data);
            var type = data.type || '';
            switch (type) {
                //初始化绑定UID CLIENTID
                case "init":
                    myscope.binduid(data.data);
                    break;
                //状态回调
                case "status":
                    if (data.data) {
                        $.Huimodalalert('操作成功！', 1000);
                    } else {
                        $.Huimodalalert(data.msg, 1000);
                    }
                    break;
                //UI更新
                case "game_update":
                    if (timer) clearInterval(timer);
                    console.log("比赛当前阶段:" + data.data.status + ",当前放扣方:" + data.data.kou);
                    myscope.kou = data.data.kou;
                    myscope.info = data.data;
                    // console.log(myscope.info);
                    myscope.no = data.data.id; //游戏ID
                    myscope.status = data.data.status;
                    myscope.$apply();
                    break;
                //用户信息
                case "user":
                    myscope.user = data.data;
                    myscope.userhis = data.his;
                    myscope.$apply();
                    break;
                //用户本地当前分数更新  分数有多重验证 在此处更改分数无效
                case "score_update":
                    myscope.user.score = data.data;
                    
                    myscope.userhis = data.his;
                    myscope.$apply();
                    break;
                //请求重新刷新当前比赛信息
                case "refresh":
                    ws.send(JSON.stringify({
                        type: "report",
                        id: null
                    }));
                    break;
                //本局结束  需要打开一个新的modal显示表格  显示本局本用户的记录信息  本部分由异步处理  表格重新请求服务端
                case "result":
                    myscope.result = data.data;
                    myscope.status = 0;
                    myscope.$apply();
                    $("#modal-result").modal("show");
                    break;
                //聊天信息 需要显示在聊天窗口并且拖到最下
                case "chat":
                    myscope.chats.push(data.from + ":" + data.data);
                    myscope.$apply();
                    break;
            }
        }
        ws.onerror = function (event) {
            if (event.type == "error") {
                $.Huimodalalert('服务器连接失败,请尝试重新刷新网页！', 1000);
                // alert("服务器连接失败，请稍后重试");
            }
            console.log(event);
        }
        ws.onclose = function (p1) {
            $.Huimodalalert('服务器连接丢失,尝试重新连接', 1000);
            connectWs();
        }
    }


    function toplay() {

        var player = new Aliplayer({
            id: 'topvideo',
            width: $("#topvideo").width() + "px",
            height: ($(".videoinfo").height()- $(".curAchivt").height()) + "px",
            autoplay: true,
            //支持播放地址播放,此播放优先级最高
            source: 'rtmp://douxi.push.86411.com.cn/live/main',
        }, function (player) {
            console.log('播放器创建好了。')
        });


        var player1 = new Aliplayer({
            id: 'bottomvideo',
            width: $(".videoWrap").width() + "px" ,
            height: $(".dataBox").height() + "px",
            autoplay: true,
            //支持播放地址播放,此播放优先级最高
            source: 'rtmp://douxi.push.86411.com.cn/live/sub',
        }, function (player) {
            console.log('播放器创建好了。')
            player1.setVolume(0);
        });

    }


</script>

<script>
    var mytable;
    $(function () {

        $("html").starfield({
            starDensity: 2.0,
            mouseScale: 0.1,
            seedMovement: true
        });

        /*弹幕宽高*/
        $(".barrageTextWrap").css({
            width: "100%",
            height: $(".topvideo").height() - $(".curAchivt").height() - 100 + 'px',
            position: "absolute",
            left: 0,
            top: 0
        })

        connectWs();
        toplay();

        mytable = $('.user-history').dataTable({
            "ajax": "/index/index/getUserHis",
            "columns": [
                {"data": "id"},
                {"data": "gid"},
                {"data": "type"},
                {"data": "data"},
                {"data": "create_time"},
                {"data": "comment"}
            ],
            "aaSorting": [[1, "desc"]],//默认第几个排序
            "bStateSave": false,//状态保存
            "aoColumnDefs": [
                //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
                {"orderable": false, "aTargets": [5]}// 制定列不参与排序
            ],
            language: {
                "sProcessing": "处理中...",
                "sLengthMenu": "显示 _MENU_ 项结果",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页"
                },
                "oAria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            }

        });
    })
</script>
</html>
